<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>汉堡研究所丨麦当劳中国</title>
    <style>
        *{
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        body{
            width: 320px;
        }
       .kj{
           width: 320px;
           height: 480px;
           background-color: #fff;
           margin: 0 auto;


       }
       .logo{
           text-align: center;
           height: 53px;
           width: 312px;
           background-color: #fff;
           position: fixed;
           top: 0;
       }
        .logo img{
            width: 39.5px;
            height: 39.5px;
            padding: 10px;
        }
       /* .icon{
            text-align: left;
            display: inline-block;
            
            padding-left: 20px;
           
        }
        .icon img{
            width: 30px;
            height: 25px;
        }*/
        .list{
            height: 79.4px;
            border-top: 1px solid gainsboro;
            border-bottom: 1px solid gainsboro;
            padding-top: 53px;
        }
        .a{
            height: 79.4px;
            width: 310px;
            margin-left: 10px;
            background-color: #ffffff;
        }
        .z{
            width: 70px;
            height: 29.5px;
            display: inline-block;
            float: left;
            margin-top: 20px;

        }
        .z img{
            width: 70px;
            height: 29.5px;
            border: 0;
        }
        .fl{
            padding-left: 10px;
            width: 225px;
            height: 79.4px;
            display: inline-block;
            font-size: 0;

        }
        .fl div{
            width: 54.4px;
            height: 79.4px;
            background-color: #ffffff;
            display: inline-block;
            margin: 0;
        }
        .fl img{
            width: 54.4px;
            height: 54.4px;
        }
        .fl span{
            font-size: 10px;
            color: #000000;
            height: 25px;
            line-height: 25px;
        }
        .lb img{
            width: 300px;
            height: 167.883px;
            padding-left: 10px;
            padding-top: 20px;
        }
        .fat{
            position: relative
        }
        .son{
            position: absolute;
            top: 240px;
            width: 20px;
            height: 30px;
            background-color:#ffffff;
            border-top-left-radius: 0px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 0px;
        }
        .son a{
            color: #000000;
            line-height: 30px;
            padding-left: 5px;
            font-weight: 700;
        }
        .son1{
            position: absolute;
            top: 240px;
            left: 310px;
            width: 20px;
            height: 30px;
            background-color:#ffffff;
            border-top-left-radius: 20px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 20px;
        }
        .son1 a{
            color: #000000;
            line-height: 30px;
            padding-left: 5px;
            font-weight: 700;
        }
        .son2 ul{
            list-style: none;
            position: absolute;
            top: 280px;
            left: 145px;
        }
        .son2 ul li{
            display: inline-block;
        }
        .son2 a{
            font-weight: bolder;
        }
        .img img{
            width: 300px;
            height: 186.567px;
        }
        .img{
            width: 300px;
            height: 186.567px;
            padding-left: 10px;
        }
        .zhong{
            width: 145px;
            height: 187.817px;
            display: inline-block;
            margin-right: 6px;
        }
        .zhong img{
            width: 145px;
            height: 187.817px;
            padding-left: 10px;
            margin-top: 5px;
        }
        .coffe{
            width: 300px;
            height: 180.553px;
            display: inline-block;
            margin-right: 6px;
        }
        .coffe img{
            width: 300px;
            height: 180.553px;
            padding-left: 10px;
            margin-top: 5px;
        }
        .kong{
            width: 320px;
            height: 80px;
            background-color: #fff;
        }
        .foooter{
            width: 300px;
            height: 58px;
            position: fixed;
            top: 422px;
            display: inline-block;
            padding-right: 0;

        }
        .footer div{
            margin-right: 10px;
            width: 320px;
            position: fixed;
            top: 422px;
            background-color: #fff;
        }
        
        .footer a{
            font-size: 0;
            width: 58px;
            height: 58px;
            font-size: 0;
            display: inline-block;

         }
         .footer a:link{
            color: #fff;
         }
         .footer a:hover{
            background-color: red;
         }

        
        .footer img{
            width: 60px;
            height: 56px;
            border: 0;
            margin: 0;
            font-size: 0;
            margin-right: 0;

        }
    </style>
</head>
<body>
<div class="kj">
    
    <div class="logo">
        <img src="img/logo.png" alt="">
    </div>
    <div class="list">
        <div class="a">
            <div class="z">
                <img src="img/safety-sign.png" alt="">
            </div>
            <div class="fl">
                <div class="b">
                    <img src="img/1.jpg" alt="">
                    <a href=""><span>全部分类</span></a>
                </div>
                <div class="c">
                    <img src="img/2.jpg" alt="">
                    <a href=""><span>肉类</span></a>
                </div>
                <div class="d">
                    <img src="img/3.jpg" alt="">
                    <a href=""><span>蛋白</span></a>
                </div>
                <div class="e">
                    <img src="img/4.jpg" alt="">
                    <a href=""><span>蔬果</span></a>
                </div>

            </div>
        </div>
    </div>
    <div class="lb">
        <img class="fat" src="img/5.jpg" alt="">
        <div class="son"><a href=""><</a></div>
        <div class="son1"><a href="">></a></div>
        <div class="son2">
            <ul>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
                <li><a href="">.</a></li>
            </ul>
        </div>
    </div>
    <div class="img">
        <img src="img/6.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/2.2.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/3.1.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/4.1.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/5.1.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/6.1.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/7.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/8.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/10.gif" alt="">
    </div>
    <div class="coffe">
        <img src="img/9.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/11.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/12.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/13.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/14.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/15.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/16.jpg" alt="">
    </div>
     <div class="zhong">
        <img src="img/17.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/18.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/19.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/20.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/21.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/22.gif" alt="">
    </div>
    <div class="zhong">
        <img src="img/23.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/24.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/25.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/26.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/27.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/28.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/29.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/30.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/31.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/32.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/33.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/34.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/35.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/36.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/37.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/38.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/39.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/40.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/41.jpg" alt="">
    </div>
    <div class="zhong">
        <img src="img/42.jpg" alt="">
    </div>
    <div class="kong">
    </div>
    <div class="footer">
        <div>
            <a href="">
                <img src="img/1.png" alt="">
            </a>
        
       
            <a href="">
                <img src="img/2.png" alt="">
            </a>
       
        
            <a href="">
                <img src="img/3.png" alt="">
            </a>
        
            <a href="">
                <img src="img/4.png" alt="">
            </a>
       
            <a href="">
                <img src="img/5.png" alt="">
            </a>
       </div>
       
    </div>


</div>

</body>
</html>